<template>
	<view class="select-keywords" >
		<search-top :separate="true" :searchValue="searchValue" />
		<!-- 行业 -->
		<view class="box">
			<view class="border-box">
				<view class="industry-item" v-for="(item, index) in trades" @click="seleteTrade(item)">
					<image src="/static/images/index/accurate-search/bookicon.png" mode=""></image>
					<text>{{item.name}}</text>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import searchTop from "@/components/index/searchTop.vue"
	export default {
		//选择行业关键词
		name: "selectKeywords",
		data() {
			return {
				trades: [], //分类信息
				searchValue: '', //选中的行业名称 （显示在输入框中）
			}
		},
		components: {
			searchTop
		},
		onLoad() {
			this.getNews();
		},
		methods:{
			//获取关键词
			getNews() {
				this.$post(this.api.indexFenlei).then((res) => {
					console.log(res);
					this.trades = res.data;
				}).catch((err) => {
					console.log(err)
				})
			},
			// 点击选择行业
			seleteTrade(val) {
				this.searchValue = val.name;
			}
			
		}
	}
	
	
</script>

<style lang="less" scoped>
	.flex{
		display: flex;
		align-items: center;
	}
	.select-keywords{
		.box{
			.border-box{
				width: 100%;
				.flex;
				flex-wrap: wrap;
				.industry-item{
					width: 50%;
					.flex;
					align-items: center;
					padding-left: 34rpx;
					padding-top: 25rpx;
					padding-bottom: 25rpx;
					box-sizing: border-box;
					border-top: 1px solid #F2F2F2;
					image{
						width: 28rpx;
						height: 35rpx;
						margin-right: 21rpx;
						flex-shrink: 0;
					}
					text{
						width: 280rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
					&:nth-child(n){
						border-right: 1px solid #F2F2F2;
					}
				}
			}
			
		}
	}
</style>
